<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-size: 16px">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px">个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <h1>基本信息</h1>
      <div class="infoArea">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="用户名">
            <el-input v-model="formLabelAlign.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="formLabelAlign.email"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="文理科">
            <el-input v-model="formLabelAlign.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="高考成绩">
            <el-input
              v-model="formLabelAlign.score"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="高考排名">
            <el-input v-model="formLabelAlign.rank" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <el-dialog
        title="修改个人信息"
        :visible.sync="editDialogVisible"
        width="400px"
        label-width="80px"
        @close="editDialogClosed"
        class="dialog"
      >
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef">
          <el-form-item label="新用户名" prop="name">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="个人邮箱" prop="email">
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="考试科目" prop="subject">
            <el-radio-group v-model="editForm.type">
              <el-radio
                v-for="(item, index) in typeOptions"
                :key="item.value"
                :value="item.value"
                :label="item.value"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="高考成绩" prop="score">
            <el-input v-model="editForm.score" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="editUser()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      //
      labelPosition: "right",
      // 信息表单
      formLabelAlign: {
        email: "",
        name: "",
        type: "",
        score: "",
        rank: "",
      },
      // 修改信息是否显示
      editDialogVisible: false,
      editForm: {
        fname: "",
        email: "",
        name: "",
        type: "",
        score: "",
        rank: "",
      },
      // 修改 属性
      editFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        type: [{ required: true, message: "请选择文理科", trigger: "blur" }],
        grade: [{ required: true, message: "请输入高考成绩", trigger: "blur" }],
        rank: [{ required: true, message: "请输入高考排名", trigger: "blur" }],
      },
      // 文理科
      typeOptions: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
    };
  },
  methods: {
    // 关闭修改弹窗
    editDialogClosed() {
      // 对话框关闭之后，重置表单
      this.$refs.editFormRef.resetFields();
    },
    // 取消修改
    cancel() {
      this.editDialogVisible = false;
      this.$message("取消修改");
    },
    // 点击修改按钮
    updateMsg(name) {
      this.editForm.fname = name;
      //显示弹出窗
      this.editDialogVisible = true;
    },
    // 点击确认修改
    editUser() {
      // 用户点击修改表单中的确定按钮之后，验证表单数据
      this.$refs.editFormRef.validate((valid) => {
        if (!valid) this.$message.error("请填写完整用户信息！");
        const token = window.sessionStorage.getItem("tokenvalue");
        this.$axios.defaults.headers.common["satoken"] = token;
        // 发送请求 完成修改用户的操作
        this.$axios
          .put(
            "/updateUser",
            qs.stringify({
              // fName: this.editForm.fname,
              name: this.editForm.name,
              email: this.editForm.email,
              type: this.editForm.type,
              score: this.editForm.score,
              // rank: this.editForm.rank,
            })
          )
          .then((res) => {
            if (res.status === 200) {
              this.$message.success("修改用户成功");
              //关闭对话框
              this.editDialogVisible = false;
              //重新请求最新的数据
              this.getUniList_Token();
              this.queryInfo.count = res.code;
            }
          });
      });
    },
  },
  // 初始化个人信息
  created() {
    const token = window.sessionStorage.getItem("tokenvalue");
    this.$axios.defaults.headers.common["satoken"] = token;
    this.$axios.get("/getUser").then((res) => {
      console.log(res);
      this.formLabelAlign = res.data;
    });
  },
};
</script>

<style scoped>
.box-card {
  width: 1100px;
  /* height: 2100px; */
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.info {
  position: relative;
  width: 800px;
  top: 30px;
  left: 50%;
  margin-left: -400px;
  height: 450px;
  /* border: 1px solid red; */
}

.info h1 {
  position: absolute;
  display: inline-block;
  width: 100px;
  left: 50%;
  margin-left: -50px;
  height: 20px;
}

.infoArea {
  position: absolute;
  top: 70px;
  width: 490px;
  left: 50%;
  margin-left: -245px;
  height: 400px;
  /* border: 1px solid blue; */
}

.el-input {
  width: 300px;
}

.updateBtn {
  width: 150px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -90px;
}

.dialog /deep/ .el-dialog__header {
  padding: 10px 20px;
}

.dialog /deep/ .el-dialog__body {
  padding: 10px 20px;
  height: 400px;
}

.el-dialog {
  margin-top: 3vh;
}
</style>